<template>
	<div class="newsinfo-container">
		<!-- detail --- {{ $route.params.id}} -->
		<!-- {{id}} -->
		<h3 class="title">{{ newsInfo.title }}</h3>
		<p class="subtitle">
			<span>发表时间: {{ newsInfo.add_time | dateFormat }}</span>
			<span>点击: {{ newsInfo.click }}次</span>
		</p>
		<hr />
		<div class="content" v-html="newsInfo.content"></div>
		<comment :id="this.id"></comment>
	</div>
</template>

<script>
import { Toast } from 'mint-ui';
import comment from '../subcomponents/Comment.vue';
export default {
	data() {
		return {
			// 获取 传递的ID值
			id: this.$route.params.id,
			newsInfo: {}
		};
	},
	created() {
		this.getNewsInfo();
	},
	methods: {
		getNewsInfo() {
			this.$http.get('api/getnew/' + this.id).then(res => {
				// console.log(res);
				if (res.body.status == 0) {
					this.newsInfo = res.body.message[0];
					//console.log(res.body.message[0]);
				} else {
					Toast('获取数据失败...');
				}
			});
		}
	},
	components: {
		comment
	}
};
</script>

<style lang="scss">
.newsinfo-container {
	padding: 0 4px;
	.title {
		font-size: 16px;
		text-align: center;
		margin: 15px 0;
		color: red;
	}
	.subtitle {
		font-size: 13px;
		color: #226aff;
		display: flex;
		justify-content: space-between;
	}
	.content {
		img {
			width: 100%; /*这里需要删除scope 设置为全局*/
		}
	}
}
</style>
